import React, { Component } from "react";
import { Link } from "react-router-dom";
import PageHeader from "../components/pageHeader";
import _Http from "../../config/api";
export default class NoticeList extends Component{
  constructor(props){
    super(props);
    this.state = {
      omsNoticeList:[],
      trNoticeList:[],
      translate:{
        cn:{
          "公告管理" : "公告管理",
          "系统管理" : "系统管理",
          "新增公告" : "新增公告",
          "标题" : "标题",
          "状态" : "状态",
          "创建日期" : "创建日期",
          "操作" : "操作",
          "发布" : "发布",
          "撤回" : "撤回",
        },
        en:{
          "公告管理" : "Announcement management",
          "系统管理" : "System management",
          "新增公告" : "New announcement",
          "标题" : "Title",
          "状态" : "Status",
          "创建日期" : "Create At",
          "操作" : "Option",
          "发布" : "Publish",
          "撤回" : "Retract",
        }
     }
    }
  }

  pageTr(){
    var _this = this,
        langIndex = _this.props.langKey,
        page = _this.state.translate[langIndex];
    return page;
  }

  loopTd(date){
    var _this = this,
        page = _this.pageTr();
    var tempArrayList =  date.map((el, index) =>{
        return <tr key={index}>
                  <td>{el.title}</td>
                  <td>{el.publish==="1"?page['发布']:page['撤回']}</td>
                  <td>{el.createAt}</td>
                  <td>{el.publish==="1"?<span className='btn btn-danger btn-xs'>{page['撤回']}</span>:<span className='btn btn-primary btn-xs'>{page['发布']}</span>}</td>
              </tr>
      });
    
    return tempArrayList;
  }

  componentDidMount() {
    var _this = this;
    _Http.get('/system/notice.php?action=list')
      .then(function (res) {
        var tempOmsArr = [],
            tempTrArr = [],
            len = res.data.length ;
        if(len){
          for(var i = 0; i < len; i++){
            if(res.data[i].belong ==='oms'){
              tempOmsArr.push(res.data[i]);
            }else{
              tempTrArr.push(res.data[i]);
            }
          }
        }

        if(tempOmsArr.length){
          _this.setState({omsNoticeList:tempOmsArr});
        }

        if(tempTrArr.length){
          _this.setState({trNoticeList:tempTrArr});
        }
      })
      .catch(function (error) {
        //Notice.errorTips(error[langIndex]);
        console.log(error);
      });
  }

  render(){
    var _this = this,
    omsNoticeList = _this.state.omsNoticeList,
    page = _this.pageTr();
   
    return(
      <div id="content">
        <PageHeader data={{title:page['公告管理'],crumb:[page['系统管理'],page['公告管理']]}}></PageHeader>
        <div id="contents" className="container-fluid">
          <div className="panel panel-default">
            <div className="panel-heading">
              <h3 className="panel-title"><i className="fa fa-list"></i>{page['公告管理']}</h3>
            </div>
            <div className="panel-body">
              <ul className="nav nav-tabs">
                <li className="active"><a href="#tab-oms" data-toggle="tab" >OMS {page['公告管理']}</a></li>
                <li><a href="#tab-tr" data-toggle="tab">Tomrepair {page['公告管理']}</a></li>
              </ul>
              <div className="tab-content">
                <div id="tab-oms" className="tab-pane active">
                  <Link className="btn btn-primary btn-sm" to={
                    { 
                        pathname:"/system/notice/add", 
                        belong:'oms',   
                    } 
                  }>{page['新增公告']}</Link>
                  <div className="marginTop">
                    <table className="table table-bordered table-hover">
                      <thead>
                        <tr>
                          <td>{page['标题']}</td>
                          <td>{page['状态']}</td>
                          <td>{page['创建日期']}</td>
                          <td>{page['操作']}</td>
                        </tr>
                      </thead>
                      <tbody>
                        {omsNoticeList.length?_this.loopTd(omsNoticeList):<tr><td className="emptyNumber" colSpan="4">没有更多的数据</td></tr>}
                      </tbody>
                    </table>
                  </div>
                </div>
                <div id="tab-tr" className="tab-pane">
                  <Link className="btn btn-primary btn-sm" to={
                    { 
                        pathname:"/system/notice/add", 
                        belong:'tr',   
                    } 
                  }>{page['新增公告']}</Link>
                  <div className="marginTop">
                      <table className="table table-bordered table-hover">
                        <thead>
                          <tr>
                            <td>{page['标题']}</td>
                            <td>{page['状态']}</td>
                            <td>{page['创建日期']}</td>
                            <td>{page['操作']}</td>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>质检单的批量录入功能优化介绍</td>
                            <td>已读</td>
                            <td>2017-12-10 22:03:52</td>
                            <td><span className="btn btn-primary btn-xs">{page['发布']}</span></td>
                          </tr>
                          <tr>
                            <td>质检单的批量录入功能优化介绍</td>
                            <td>已读</td>
                            <td>2017-12-10 22:03:52</td>
                            <td><span className="btn btn-danger btn-xs">{page['撤回']}</span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );

  }
}